<template>
  <div class="edit-box">
    <el-form label-width="120px" class="form-grid" :model="formData" ref="form" :rules="rules">
      <el-row :gutter="20">
        <el-col :span="16">

          <el-form-item label="联系人" prop="contacts"><el-input v-model="formData.contacts" /></el-form-item>
          <el-form-item label="联系电话" prop="contacts_tel"><el-input v-model="formData.contacts_tel" /></el-form-item>
          <el-form-item label="商户名称" prop="merchant_name"><el-input v-model="formData.merchant_name" /></el-form-item>
          <el-form-item label="商户简介" prop="merchant_profile"><el-input v-model="formData.merchant_profile" /></el-form-item>

          <el-form-item label="商户分类:" prop="merchant_classify">
           <el-select clearable v-model="formData.merchant_classify" placeholder="请选择商户分类" class="ele-block" @change="handleClassChange" style="width: 300px">
             <el-option v-for="item in merchantClassList" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
          </el-form-item>

          <el-form-item label="是否邻事联盟" prop="is_consular_alliance">
            <el-radio-group v-model=" formData.is_consular_alliance">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="所在区域" prop="areas">
            <el-cascader v-model="formData.areas" :options="optionData" :props="cascaderProps" style="width: 400px;"
              @change="handleAreaChange"></el-cascader>
          </el-form-item>

          <el-form-item label="所在社区" prop="community_id" v-if="formData.areas">
            <el-select clearable v-model="formData.community_id" placeholder="请选择社区" class="ele-block"
              @change="handleCommunityChange" style="width: 300px">
              <el-option v-for="item in communityList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>

          <el-form-item label="商户地址" prop="merchant_address"><el-input v-model="formData.merchant_address" />
          </el-form-item>

        </el-col>

        <el-col :span="6">
          <el-form-item label="商户logo" prop="brand_logo">
            <uploadImage :limit="1" v-model="formData.brand_logo"></uploadImage>
          </el-form-item>

          <el-form-item label="商户海报" prop="merchant_background_img">
            <uploadImage :limit="1" v-model="formData.merchant_background_img"></uploadImage>
          </el-form-item>

          <el-form-item label="营业执照" prop="business_license_url">
            <uploadImage :limit="1" v-model="formData.business_license_url"></uploadImage>
          </el-form-item>

        </el-col>

      </el-row>
      <el-divider></el-divider>
      <div class="bt-box">

        <el-form-item class="btn-group">
          <el-button type="primary" @click="submitData">提交</el-button>
          <el-button type="info" @click="onCancel">取消</el-button>
        </el-form-item>
      </div>


    </el-form>


  </div>
</template>

<script>
  import uploadImage from '@/components/uploadImage'

  export default {
    name: "MerchantDetail",
    props: {

    },
    components: {
      uploadImage,


    },
    data() {
      return {
        merchantClassList:[],
        communityList: [],
        modelItem: null,
        productItemList: [],
        optionData: [],

        formData: {
          community_id: null,
        },
        cascaderProps: {
          emitPath: true, // 默认是 true，如果你只想拿到最后一级就设为 false
          checkStrictly: false, // 是否可选择任意一级，默认 false
        },
        rules: {
          contacts: [{
            required: true,
            message: '请输入联系人',
            trigger: 'blur'
          }],
          contacts_tel: [{
            required: true,
            message: '请输入商户电话',
            trigger: 'blur'
          }],
          merchant_name: [{
            required: true,
            message: '请输入商户名称',
            trigger: 'blur'
          }],
          merchant_classify: [{
            required: true,
            message: '请选择商户分类',
            trigger: 'blur'
          }],
          areas: [{
            required: true,
            message: '请输入商户区域',
            trigger: 'blur'
          }],
          merchant_address: [{
            required: true,
            message: '请输入商户地址',
            trigger: 'blur'
          }],
        },
      };
    },
    mounted() {
      this.initData();
      this.getTreeList();
      this.getProductItemList();
    },
    methods: {
      initData() {
        const loading = this.$loading({
          lock: true
        });
        this.$httpRequest.get('/community/tree').then(result => {
          console.log('--getRegionsList--4----', result)
          this.optionData = result
          loading.close();
        }).catch(e => {
          this.$message.error(e.message)
          loading.close();
        });
      },

      handleAChange(value) {
        console.log('---handleAChange---', value)
        this.formData.merchant_classify = 0;
        this.getTreeList(value)
      },

      handleClassChange(){

      },

      submitData() {


        this.$refs['form'].validate((valid) => {
          if (valid) {
            if (this.formData.areas.length != 4) {
              this.$message.error('请选择商户区域')
            }
            this.formData.community_province_id = this.formData.areas[0] * 1
            this.formData.community_city_id = this.formData.areas[1] * 1
            this.formData.community_area_id = this.formData.areas[2] * 1
            this.formData.community_town_id = this.formData.areas[3] * 1
            this.loading = true;
            console.log('-----post---data', this.formData)


            this.$httpRequest.post('/merchant/add', this.formData).then(res => {
              console.log('------merchant/add----', res)

              if (res.code == 0) {
                this.$message.success(res.msg);
                if (!this.isUpdate) {
                  this.form = {};
                }
                this.$emit('action_done',{is_reload:true});
              } else {
                this.$message.error(res.msg);
              }
            }).catch(e => {

              this.$message.error(e.message);
            });
          } else {
            return false;
          }
        });



        //action

      },
      onCancel() {
         this.$emit('action_done',{is_reload:false});
      },
      getProductItemList() {
        this.$httpRequest.get('/product/item/list').then(result => {
          if (result.code === 0) {
            this.productItemList = result.data;
          }
        }).catch(e => {
          this.$message.error(e.message)
        });

      },
      getTreeList() {
        this.$httpRequest.get('/product/category/top',{type: 2}).then(result => {
          this.merchantClassList = result;
        }).catch(e => {
          this.$message.error(e.message)
        });
      },

      handleAreaChange(data) {
        console.log('---handleAreaChange---', data);
        let town_id = data[3] * 1;
        this.formData.community_id = null;
        this.getCommunityList(town_id);
      },

      getCommunityList(town_id = 0) {
        this.$httpRequest.get('/community/tpl', {
          town_id: town_id
        }).then(result => {
          this.communityList = result;
        }).catch(e => {
          this.$message.error(e.message)
        });
      },


      handleNodeChange(data) {
        console.log('---handleNodeChange---', data)
      },
      handleChangeInput(data) {
        console.log('---handleChangeInput---', data)
      },
      handleCommunityChange(data) {

        console.log('---handleCommunityChange---', data)
        //this.formData.community_id = data*1; // 保证类型一致
      }

    }
  };
</script>

<style scoped>
  .edit-box {
    box-sizing: border-box;
    padding: 10px 40px 20px 10px;
  }

  .form-grid .el-form-item {
    margin-bottom: 20px;
  }

  .full-width {
    margin-top: 20px;
  }

  .full-width .el-input {

    width: 100%;
  }

  .btn-group {
    text-align: center;
  }

  .bt-box {
    margin-top: 30px;

    width: 100%;
    display: flex;
    justify-content: flex-end
  }
</style>
